<template>
  <div class="app-container">
    <el-button type="primary" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
    <div class="title">{{name}}</div>
    <el-card  class="form-container">
    <el-tabs v-model="activeName"  :before-leave="beforeLeave">
      <el-tab-pane name="1" lazy>
        <span slot="label" >① 准备
          <i v-if="state&0b100000" class="el-icon-circle-check finishedcheck"></i>
        </span>
        <incubatorStep1 v-if="projectType == 2" :getId="id" @changeState="getData" />
        <CarStep1 v-else-if="projectType == 3" :getId="id" @changeState="getData" />
        <div v-else>该任务暂时没有进度信息。</div>
      </el-tab-pane>
      <el-tab-pane name="2" lazy>
        <span slot="label" >② 验证方案
          <i v-if="state&0b010000" class="el-icon-circle-check finishedcheck"></i>
        </span>
          <Step2 :getId="id" @changeState="getData" /> 
      </el-tab-pane>
      <el-tab-pane  name="3" lazy>
        <span slot="label">③ 验证过程
          <i v-if="state&0b001000" class="el-icon-circle-check finishedcheck"></i>
        </span>
        <Step3 :getId="id" @changeState="getData" />
      </el-tab-pane>
      <el-tab-pane name="4" lazy>
        <span slot="label">④ 验证数据
          <i v-if="state&0b000100" class="el-icon-circle-check finishedcheck"></i>
        </span>
         <step4 :getId="id" @changeState="getData" />
      </el-tab-pane>
      <el-tab-pane name="5" lazy>
         <span slot="label">⑤ 验证内容
          <i v-if="state&0b000010" class="el-icon-circle-check finishedcheck"></i>
        </span>
        <incubatorStep5 :getId="id" v-if="projectType==2" @changeState="getData" />
        <CarStep5 :getId="id" v-if="projectType==3" @changeState="getData" />
      </el-tab-pane>
      <el-tab-pane name="6" lazy>
        <span slot="label">⑥ 验证报告
          <i v-if="state&0b000001" class="el-icon-circle-check finishedcheck"></i>
        </span>
        <step6 :getId="id" @changeState="getData" />
        </el-tab-pane>
    </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { getProjectData } from "@/api/project";
import incubatorStep1 from "@/views/tasks/components/incubatorStep1";
import CarStep1 from "@/views/tasks/components/carStep1";
import Step3 from "@/views/tasks/components/Step3";
import Step2 from "@/views/tasks/components/Step2";
import Step4 from "@/views/tasks/components/Step4";
import incubatorStep5 from "@/views/tasks/components/incubatorStep5";
import CarStep5 from "@/views/tasks/components/carStep5";
import Step6 from "@/views/tasks/components/Step6";
import { getTaskData } from "@/api/task";
export default {
  components: {
    incubatorStep1,
    CarStep1,
    Step2,
    Step3,
    Step4,
    incubatorStep5,
    CarStep5,
    Step6
  },
  data() {
    return {
      id: this.$route.params.id,
      taskId: null,
      activeName: "1",
      name: "",
      projectType: null,
      state: 0
    };
  },
  created() {
    this.getData();
  },
  methods: {
    //获取子项目信息
    getData() {
      getProjectData({ projectId: this.id }).then(res => {
        this.projectType = res.data.projectType;
        this.taskId = res.data.tid;
        this.name = res.data.name;
        this.state = res.data.state;
      });
    },
    //返回子项目列表
    goBack() {
      this.$router.push({
        path: "/task/project/" + this.taskId
      });
    },
    
    beforeLeave(activeName, oldActiveName) {
      switch (activeName) {
        case "5": {
          if (
            this.state & 0b100000 && this.state & 0b000100 && this.state & 0b001000
          ) {
            return true;
          }
          this.$message({
            message: "请先完成准备、验证过程、验证数据步骤",
            type: "warning"
          });
          return false;
        }
        default: {
          return true;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  font-weight: 700;
}
.finishedcheck {
  color: #67c23a;
  margin-left: 10px;
}
</style>
